<template>
    <view class="Login-page">
        <image mode="aspectFill" src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/denglu-yemian.jpg">
        </image>
        <button @click="Login">授权登陆</button>
    </view>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, toRefs } from 'vue'
import RequestApi from '@/public/request'
//   授权登陆
function Login() {
    uni.getUserProfile({
        desc: '获取个人信息',
        //点击允许执行
        success: (res) => {
            let { nickName, avatarUrl } = res.userInfo;
            //得到code
            uni.login({
                success: (res) => {
                    uni.showLoading({ title: "正在登录......", mask: true });
                    login(nickName, avatarUrl, res.code);
                },
                fail: (res) => {
                    uni.showToast({ title: '登录失败', icon: 'none', duration: 1000 })
                }
            })
        },
        fail: (res) => {
            uni.showToast({ title: '登录失败', icon: 'none', duration: 1000 })
        }
    })

}

//   登录
async function login(nickName: string, avatarUrl: string, code: string) {
    try {
        let obj = { appid: 'wxa70be3e54fd21914', secret: '473ecbf46ad3cefc1b84088960b8e6dc', nickName, avatarUrl, code }
        const res: any = await RequestApi.userLogin(obj);
        uni.setStorageSync('user', res.data.data);
        uni.navigateBack()//返回上一页面
        uni.hideLoading();//关闭遮罩层
    } catch (error) {
        uni.showToast({ title: '登录失败', icon: 'none', duration: 1000, });
        // uni.hideLoading();//关闭遮罩层
    }

}
</script>

<style>
.Login-page {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.Login-page image {
    width: 100%;
    height: 100%;
}

.Login-page button {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: 30%;
    background-color: #2c76ef;
    color: #ffffff;
    padding: 0 100rpx;
    font-size: 35rpx;
}
</style>